<!DOCTYPE html>
<html>

<head>
    <title>WMTS</title>
    <script src="ol.js"></script>
    <link rel="stylesheet" href="ol.css">
</head>
<style type="text/css">
    #map {
        width: 100%;
        height: 100%;
    }
</style>

<body>
<div id="map" class="map"></div>
<script>
    var projection = ol.proj.get('EPSG:4326');
    var projectionExtent = projection.getExtent();
    var size = ol.extent.getWidth(projectionExtent) / 256;
    var resolutions = [];
    var matrixIds = [];
    for (var z = 0; z < 19; ++z) {
        resolutions[z] = size / Math.pow(2, z);
        matrixIds[z] = z;
    }

    var url = "http://www.sdmap.gov.cn/tileservice/SDPubMap";
    var tiandimap = new ol.layer.Tile({
        source: new ol.source.WMTS({
            url: url,
            projection: projection,
            style: 'default',
            format: 'image/png',
            matrixSet: "EPSG:4326",
            layer: "sdvec",
            tileGrid: new ol.tilegrid.WMTS({
                origin: ol.extent.getTopLeft(projectionExtent),
                resolutions: resolutions,
                matrixIds: matrixIds
            }),
        })
    });

    var view = new ol.View({
        projection: projection,
        center: [120.151527, 35.99825595],
        zoom: 9
    });

    var map = new ol.Map({
        layers: [tiandimap],
        target: 'map',
        view: view
    });

    map.on("moveend",function(e){
        var zoom = map.getView().getZoom();  //获取当前地图的缩放级别
        console.log(zoom);

    });
</script>
</body>
<!--http://service.sdmap.gov.cn/tileservice/sdpubmap?tk=9cc3e9deb3cf643b6f133717c333d16d&service=WMTS&request=GetCapabilities-->
</html>
